<template>
  <a-modal v-model:visible="visible" :title="title" @before-ok="handleOk" @ok="$emit('doRefresh')">
    <a-form ref="formRef" :model="form">
      <a-form-item field="accountManager" label="客户经理">
        <a-select v-model="form.accountManager" placeholder="选择客户经理" allow-search>
          <a-option
            v-for="manager in managers"
            :key="manager.userId"
            :value="manager.userId"
            :label="manager.userName"
          />
        </a-select>
      </a-form-item>
      <a-form-item field="actualPaymentAmount" label="实际支付金额">
        <a-input-number v-model="form.actualPaymentAmount" placeholder="实际支付金额" />
      </a-form-item>
      <a-form-item field="advancePaymentAmount" label="	垫付金额">
        <a-input-number v-model="form.advancePaymentAmount" placeholder="	垫付金额" />
      </a-form-item>
      <a-form-item field="customerId" label="客户">
        <a-select v-model="form.customerId" placeholder="选择客户" allow-search>
          <a-option
            v-for="customer in customers"
            :key="customer.id"
            :value="customer.customerId"
            :label="customer.customerName"
          />
        </a-select>
      </a-form-item>
      <a-form-item field="paymentBank" label="支付银行">
        <a-input v-model="form.paymentBank" placeholder="支付银行" />
      </a-form-item>
      <a-form-item field="paymentScreenshot" label="付款截图">
        <a-upload
          v-model:file-list="form.paymentScreenshot"
          :custom-request="uploadScreenShots"
          :limit="1"
        />
      </a-form-item>
      <a-form-item field="rechargeAmount" label="充值金额">
        <a-input-number v-model="form.rechargeAmount" placeholder="充值金额" />
      </a-form-item>
      <a-form-item field="remarks" label="备注">
        <a-input v-model="form.remarks" placeholder="备注" />
      </a-form-item>
      <a-form-item field="status" label="状态">
        <a-select v-model="form.status" disabled placeholder="状态">
          <a-option
            v-for="(item, index) in Status"
            :key="index"
            :value="index"
            :label="item.title"
          />
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { useFlowActionHook } from './FlowAction.hook'
  import { Status } from '../index.hook'

  const visible = defineModel<boolean>('visible')
  const title = ref('新增流水')

  const emits = defineEmits<{
    doRefresh: []
  }>()

  const { form, formRef, submit, customers, managers, uploadScreenShots } = useFlowActionHook({
    doRefresh: () => emits('doRefresh'),
  })

  const handleOk = async (done: (closed: boolean) => void) => {
    const bool = await submit(done)
    if (bool) {
      emits('doRefresh')
    }
  }

  watch(
    () => visible.value,
    (val) => {
      if (val) {
        form.status = 1
      }
    }
  )
</script>
